<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <em>em</em>
    <div class="box" title="这是title" abc="这是abc">
        <span>1</span>
        文字
        <!-- 注释 -->
        <span>2</span>
    </div>
    <i>i</i>
</body>
<script>
    // 其他节点选择器都是间接选择（关系选择），都需要参照元素
    var box = document.querySelector(".box");
    console.log(box);

    // 子节点选择器
    console.log( box.childNodes );
    console.log( box.childNodes[3] );
    console.log( box.childNodes[2] );
    console.log( box.childNodes[1] );

    // 第一个子节点
    console.log( box.firstChild );
    // 最后一个子节点
    console.log( box.lastChild );

    // 上一个兄弟节点
    console.log( box.previousSibling );

    // 下一个兄弟节点
    console.log( box.nextSibling );

    // 根节点
    console.log(document)

    // 属性节点没有参与到DOM的家族关系中

    // 属性节点选择器
    console.log( box.attributes );
    
    console.log( box.attributes.class );
    console.log( box.attributes[0] );


    
</script>
</html>